<template>
  <Teleport to="body">
    <div
      class="select-none fixed top-0 left-0 z-[99] heading-s-medium bg-c-black text-c-white px-4 py-2 rounded-lg text-center"
      :class="[
        { Notification: !isMobileOrTablet },
        { 'top-1/3 left-2/4': isMobileOrTablet }
      ]"
    >
      {{ props.text }}
    </div>
  </Teleport>
</template>

<script setup lang="ts">
interface IProps {
  text: string
}

const { isMobileOrTablet } = useDevice()

const props = withDefaults(defineProps<IProps>(), {
  text: ''
})
</script>

<style scoped lang="scss">
$component: '.Notification';

#{$component} {
  transform: translate(45vw, 90vh);
}
</style>
